export default `<template>
  <div class="map" id="map"></div>
</template>

<script>
import "ol/ol.css";
import Draw from "ol/interaction/Draw";
import Map from "ol/Map";
import View from "ol/View";
import TileArcGISRest from "ol/source/TileArcGISRest";
import { Tile as TileLayer } from "ol/layer";
import CONSTANT from "@/config/constant.js";

export default {
  name: "ArcGIS_Map",

  methods: {
    init() {
      this.map = new Map({
        layers: [
          new TileLayer({
            source: new TileArcGISRest({
              url: CONSTANT.GIS_URL
            })
          })
        ],
        target: "map",
        view: new View({
          center: [113.0567, 23.67537],
          maxZoom: 18,
          minZoom: 8,
          zoom: 13,
          projection: "EPSG:4326"
        })
      });
    }
  },

  mounted() {
    this.init();
  }
};
</script>

<style lang="less" scoped>
.map {
  height: 100%;
}
</style>
`